<!DOCTYPE html>
<html lang="en"><head>
        <meta charset="utf-8">
        <title>Sweet Dreams - UI elements</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Le styles -->
        <link href="css/style.css" rel="stylesheet">
        <link href="css/bootstrap.css" rel="stylesheet">

        <link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" media="screen"  />
        <link rel="stylesheet" href="css/fullcalendar.css" media="screen"  />
        <link rel="stylesheet" href="css/chosen.css" media="screen"  />
        <link rel="stylesheet" href="css/datepicker.css" >
        <link rel="stylesheet" href="css/colorpicker.css">
        <link rel="stylesheet" href="css/glisse.css?1.css">
        <link rel="stylesheet" href="css/jquery.jgrowl.css">
        <link rel="stylesheet" href="js/elfinder/css/elfinder.css" media="screen" />
        <link rel="stylesheet" href="css/jquery.tagsinput.css" />
        <link rel="stylesheet" href="css/demo_table.css" >
        <link rel="stylesheet" href="js/export/css/TableTools.css" >
        <link rel="stylesheet" href="css/validationEngine.jquery.css">
        <link rel="stylesheet" href="css/jquery.stepy.css" />

        <link rel="stylesheet" href="css/icon/font-awesome.css">    <link rel="stylesheet" href="css/bootstrap-responsive.css">

        <link rel="alternate stylesheet" type="text/css" media="screen" title="green-theme" href="css/color/green.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="css/color/red.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="black-theme" href="css/color/black.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="orange-theme" href="css/color/orange.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="purple-theme" href="css/color/purple.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="silver-theme" href="css/color/silver.css" />
        <link rel="alternate stylesheet" type="text/css" media="screen" title="metro-theme" href="css/color/metro.css" />

        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!--[if lte IE 8]><script type="text/javascript" src="/js/excanvas.min.js"></script><![endif]-->

        <!-- Le fav and touch icons -->
        <link rel="shortcut icon" href="/images/icons/favicon.ico">

    </head>

    <body>
        <!-- switcher color -->
        <div id="slideout">
            <a class="link-settings-colors"><i class="icon-cog"></i></a>
            <div id="slideout_inner">
                <form id="switchform">
                    <ul>
                        <li><a href="javascript:chooseStyle('none', 30)" class="colorblue">Default style</a></li>
                        <li><a href="javascript:chooseStyle('orange-theme', 30)" class="colororange">Orange theme</a></li>
                        <li><a href="javascript:chooseStyle('silver-theme', 30)" class="colorsilver">Silver theme</a></li>
                        <li><a href="javascript:chooseStyle('black-theme', 30)" class="colorblack">Black theme</a></li>
                        <li><a href="javascript:chooseStyle('green-theme', 30)" class="colorgreen">Green theme</a></li>
                        <li><a href="javascript:chooseStyle('purple-theme', 30)" class="colorpurple">Purple theme</a></li>
                        <li><a href="javascript:chooseStyle('red-theme', 30)" class="colorred">Red theme</a></li>
                        <li><a href="javascript:chooseStyle('metro-theme', 30)" class="colormetro">Metro theme</a></li>
                    </ul>
                </form>
            </div>
        </div>
        <!-- switcher color END-->

        <!--Header Start-->
        <div class="header" >

            <a href="dashboard.html" class="logo"><h1>SWEET DREAMS</h1></a>

            <div class="pull-right">

                <!--Notifications Start-->  
                <div class="notifications-head">

                    <!--Messages Start-->
                    <div class="btn-group m_left hide-mobile" >
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <span class="notification">531</span><span class="triangle-1"></span><i class="icon-comments"></i><span class="caret"></span>
                        </a>
                        <div class="dropdown-menu">

                            <span class="triangle-2"></span>
                            <div class="ichat">
                                <div class="ichat-messages">
                                    <div class="ichat-title">
                                        <div class="pull-left">New Messages</div>
                                        <div class="pull-right"><span>Update 4*</span></div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="imessage">
                                        <div class="iavatar"><img src="images/users/1.jpg" alt=""></div>
                                        <div class="imes">
                                            <div class="iauthor">Alan Cook</div>
                                            <div class="itext">All right. Thank you.</div>
                                        </div>
                                        <div class="idelete"><a href="#"><span><i class="icon-remove"></i></span></a></div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="imessage">
                                        <div class="iavatar"><img src="images/users/6.jpg" alt=""></div>
                                        <div class="imes">
                                            <div class="iauthor">Emma Clark</div>
                                            <div class="itext">Will you pay by credit card?</div>
                                        </div>
                                        <div class="idelete"><a href="#"><span><i class="icon-remove"></i></span></a></div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="imessage">
                                        <div class="iavatar"><img src="images/users/2.jpg" alt=""></div>
                                        <div class="imes">
                                            <div class="iauthor">Blake Washington</div>
                                            <div class="itext">Can I help you?</div>
                                        </div>
                                        <div class="idelete"><a href="#"><span><i class="icon-remove"></i></span></a></div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="ichat-link"><a href="#">InBox</a> <a href="#">OutBox</a> <a href="#">Spam</a> <a href="#">Trash</a>
                                        <div class="clear"></div>
                                    </div>

                                </div>
                                <a href="#" class="iview">View all</a><a href="#" class="imark">Mark all read</a>

                            </div>

                        </div>
                    </div>
                    <!--Messages END--> 

                    <!--Recent Activity Start-->
                    <div class="btn-group pull-left hide-mobile" >
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <span class="notification">77</span><span class="triangle-1"></span><i class="icon-bell"></i><span class="caret"></span>
                        </a>
                        <div class="dropdown-menu">

                            <span class="triangle-2"></span>
                            <div class="ichat">
                                <div class="ichat-messages">
                                    <div class="ichat-title">
                                        <div class="pull-left">Recent Activity</div>
                                        <div class="pull-right"><span>Update 14*</span></div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="r_activity">
                                        <div class="imessage">
                                            <div class="r_icon"><a href="#"><i class="icon-camera"></i></a></div>
                                            <div class="r_info">
                                                <div class="r_name"><strong>Alan Cook</strong> a new photo</div>
                                                <div class="r_text"><i class="icon-time"></i> 3 hours ago</div>
                                                <div class="r_link"><a href="#">View...</a></div>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                        <div class="imessage">
                                            <div class="r_icon"><a href="#"><i class="icon-thumbs-up"></i></a></div>
                                            <div class="r_info">
                                                <div class="r_name"><strong>Isaac Donaldson</strong> like: BMW E36</div>
                                                <div class="r_text"><i class="icon-time"></i> 5 hours ago</div>
                                                <div class="r_link"><a href="#">View...</a></div>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                        <div class="imessage">
                                            <div class="r_icon"><a href="#"><i class="icon-user"></i></a></div>
                                            <div class="r_info">
                                                <div class="r_name">Registered new user</div>
                                                <div class="r_text"><i class="icon-time"></i> 15th of May - 06:21</div>
                                                <div class="r_link"><a href="#">View...</a></div>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                    </div>


                                </div>
                                <a href="#" class="iview">View all</a><a href="#" class="imark">Mark all read</a>

                            </div>

                        </div>
                    </div>
                    <!--Recent Activity END--> 

                </div><!--Notifications END-->

                <!--Button User Start-->  
                <div class="btn-group pull-right" >
                    <a class="btn btn-profile dropdown-toggle" id="button-profile" data-toggle="dropdown" href="#">
                        <span class="name-user"><strong>Welcome</strong>, Alan Cook</span> 
                        <span class="avatar"><img src="images/users/1.jpg" alt="" ></span> 
                        <span class="caret"></span>
                    </a>
                    <div class="dropdown-menu" id="prof_dropdown">
                        <div class="item_m"><span class="caret"></span></div>
                        <ul class="clear_ul" >
                            <li><a href="#"><i class="icon-globe"></i> Home</a></li>
                            <li><a href="#"><i class="icon-comments"></i> Messages</a></li>
                            <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                            <li><a href="index.html"><i class="icon-off"></i> Sign Out</a></li>
                        </ul>
                    </div>
                </div>
                <!--Button User END-->  

            </div>
        </div>
        <!--Header END-->


        <!--Sidebar Start--> 
        <div id="sidebar">
            <ul class="menu-sidebar">
                <li><a href="dashboard.html"><i class="icon-home"></i> <span>General</span></a></li>
                <li><a href="ui.html" class="active"><i class="icon-group"></i> <span>UI </span></a></li>
                <li><a href="forms.html"><i class="icon-edit"></i> <span>Forms</span></a></li>
                <li><a href="widgets.html"><i class="icon-briefcase"></i> <span>Others</span></a></li>
                <li><a href="error_404.html"><i class="icon-warning-sign"></i> <span>Errors</span></a></li>
                <li><a href="messages.html"><i class="icon-gift"></i> <span>Bonus</span></a></li>
            </ul>


        </div>
        <!--Sidebar END-->

        <!--Content Start-->
        <div id="content">


            <!--SpeedBar Start-->
            <div class="speedbar">
                <div class="speedbar-content">

                    <ul class="menu-drop">
                        <li><a href="#"><i class="icon-chevron-down"></i></a>
                            <ul>
                                <li><a href="dashboard.html">Dashboard</a></li>
                                <li><a href="charts.html">Charts</a></li>
                                <li><a href="gallery.html">Image Gallery</a></li>
                                <li><a href="calendar.html">Calendar</a></li>
                                <li><a href="ui.html">UI elements</a></li>
                                <li><a href="icons.html">Icons</a></li>
                                <li><a href="buttons.html">Buttons</a></li>
                                <li><a href="grids.html">Grids</a></li>
                                <li><a href="forms.html">Inputs & elements</a></li>
                                <li><a href="form_validation.html">Validation</a></li>
                                <li><a href="wizard.html">Wizard</a></li>
                                <li><a href="file_manager.html">File Manager</a></li>
                                <li><a href="conversation.html">Conversation</a></li>
                                <li><a href="widgets.html">Widgets</a></li>
                                <li><a href="typography.html">Typography</a></li>
                                <li><a href="tables.html">Tables</a></li>
                                <li><a href="datatables.html">DataTables</a></li>
                                <li><a href="error_404.html">Error 404</a></li>
                                <li><a href="error_500.html">Error 500</a></li>
                                <li><a href="error_503.html">Error 503</a></li>
                                <li><a href="error_offline.html">Error Offline</a></li>
                                <li><a href="messages.html">Messages</a></li>
                                <li><a href="search.html">Search</a></li>
                                <li><a href="profile.html">Profile</a></li>
                                <li><a href="stream.html">Stream</a></li>
                                <li><a href="invoice.html">Invoice</a></li>
                            </ul>  
                        </li>
                    </ul>

                    <ul class="menu-speedbar">
                        <li><a href="ui.html" class="act_link">UI elements</a></li>
                        <li><a href="icons.html">Icons</a></li>
                        <li><a href="buttons.html">Buttons</a></li>
                        <li><a href="grids.html">Grids</a></li>
                    </ul>


                </div>
            </div>
            <!--SpeedBar END-->

            <!--Search Start-->   
            <div class="search">
                <form class="search-form">
                    <input type="text" name="" value="" placeholder="Enter keywords">
                </form>
                <div class="clear"></div>	
            </div>
            <!--Search END-->

            <!--CONTENT MAIN START-->
            <div class="content">


                <!--Breadcrumb Start-->
                <ul class="breadcrumb">
                    <li class="you-here"><span>You are here:</span></li> 
                    <li><a href="#">Home</a> <span class="divider">></span></li>
                    <li><a href="#">Library</a> <span class="divider">></span></li>
                    <li class="active">Data</li>
                </ul> 
                <!--Breadcrumb END-->

                <!--Sliders Start-->
                <div class="grid">
                    <div class="grid-title">
                        <div class="pull-left">Sliders</div>
                        <div class="pull-right"></div>
                        <div class="clear"></div>
                    </div>
                    <div class="grid-content">
                        <div class="formRow">
                            <label>Usual slider:</label>
                            <div class="formRight">
                                <div id="slider"></div> 
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Slider with increments:</label>
                            <div class="formRight">
                                $50 increments: <input type="text" id="amount" class="ui_input" />
                                <div id="slider2"></div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Price range:</label>
                            <div class="formRight">
                                Price range: <input type="text" id="amount2"  />
                                <div id="slider-range"></div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>With fixed minimum:</label>
                            <div class="formRight">
                                Minimum: <input type="text" id="amount3" />
                                <div id="slider-range-min"></div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>With fixed maximum:</label>
                            <div class="formRight">
                                Maximum: <input type="text" id="amount4" />
                                <div id="slider-range-max"></div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Vertical multiple sliders:</label>
                            <div class="formRight">
                                <div id="eq">
                                    <span>88</span>
                                    <span>77</span>
                                    <span>55</span>
                                    <span>33</span>
                                    <span>40</span>
                                    <span>45</span>
                                    <span>70</span>
                                    <span>33</span>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>    
                </div>
                <!--Sliders END-->

                <!--Colored Sliders Start-->
                <div class="grid">
                    <div class="grid-title">
                        <div class="pull-left">Colored Sliders</div>
                        <div class="pull-right"></div>
                        <div class="clear"></div>
                    </div>
                    <div class="grid-content">
                        <div class="formRow">
                            <label>Orange:</label>
                            <div class="formRight">
                                <div  class="slider-orange demo_slider"></div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Red:</label>
                            <div class="formRight">
                                <div class="slider-red demo_slider"></div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Blue:</label>
                            <div class="formRight">
                                <div class="demo_slider"></div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Purple:</label>
                            <div class="formRight">
                                <div class="slider-green demo_slider"></div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Vertical multiple sliders:</label>
                            <div class="formRight">
                                <div id="eq" class="slider-green">
                                    <span>66</span>
                                    <span>66</span>
                                </div>
                                <div id="eq" class="slider-red">
                                    <span>66</span>
                                    <span>66</span>
                                </div>
                                <div id="eq">
                                    <span>66</span>
                                    <span>66</span>
                                </div>
                                <div id="eq" class="slider-orange">
                                    <span>66</span>
                                    <span>66</span>
                                </div>
                            </div>
                        </div>

                        <div class="clear"></div>
                    </div>    
                </div>
                <!--Colored Sliders END-->

                <!--Toggle Start-->
                <div class="grid">
                    <div class="grid-title">
                        <div class="pull-left">Toggle</div>
                        <div class="pull-right"></div>
                        <div class="clear"></div>
                    </div>
                    <ul id="toggle-view">
                        <li>
                            <div class="toggle-head">
                                <h3>Title 1</h3>
                                <span>+</span>
                            </div>
                            <div class="panel">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
                            </div>
                        </li>
                        <li>
                            <div class="toggle-head">
                                <h3>Title 2</h3>
                                <span>+</span>
                            </div>
                            <div class="panel">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
                            </div>
                        </li>
                        <li>
                            <div class="toggle-head">
                                <h3>Title 3</h3>
                                <span>+</span>
                            </div>
                            <div class="panel">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>    
                </div>
                <!--Toggle END-->

                <!--Collapsible Group Start-->
                <div class="grid-transparent">
                    <div class="accordion" id="accordion2">
                        <div class="accordion-group">
                            <div class="accordion-titleing">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                                    Collapsible Group Item #1
                                </a>
                            </div>
                            <div id="collapseOne" class="accordion-body collapse in">
                                <div class="accordion-inner">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-group">
                            <div class="accordion-titleing">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                                    Collapsible Group Item #2
                                </a>
                            </div>
                            <div id="collapseTwo" class="accordion-body collapse">
                                <div class="accordion-inner">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-group">
                            <div class="accordion-titleing">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                                    Collapsible Group Item #3
                                </a>
                            </div>
                            <div id="collapseThree" class="accordion-body collapse">
                                <div class="accordion-inner">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                    </div>   
                </div>
                <!--Collapsible Group END-->

                <!--Alerts Start-->
                <div class="grid">
                    <div class="grid-title">
                        <div class="pull-left">Alerts</div>
                        <div class="pull-right"></div>
                        <div class="clear"></div>
                    </div>
                    <div class="grid-content">
                        <div class="alert">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <strong>Warning!</strong> Best check yo self, you're not looking too good.
                        </div>

                        <div class="alert alert-error">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <strong>Oh snap!</strong> Change a few things up and try submitting again.
                        </div>  

                        <div class="alert alert-success">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <strong>Well done!</strong> You successfully read this important alert message.
                        </div>

                        <div class="alert alert-info">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                        </div>

                        <div class="alert alert-block alert-error fade in">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <h4 class="alert-titleing">Oh snap! You got an error!</h4>
                            <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                            <p>
                                <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
                            </p>
                        </div>

                        <div class="clear"></div>
                    </div>    
                </div>
                <!--Alerts END-->


                <div class="row-fluid">
                    <!--Pagination Start-->
                    <div class="grid span6">
                        <div class="grid-title">
                            <div class="pull-left">Pagination</div>
                            <div class="pull-right"></div>
                            <div class="clear"></div>
                        </div>
                        <div class="grid-content">
                            <div class="pagination-desc">Pagination  Left:</div>
                            <div class="pagination">
                                <ul>
                                    <li class="disabled"><a href="#">&laquo;</a></li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">&raquo;</a></li>
                                </ul>
                            </div>
                            <div class="pagination-desc">Pagination  Center:</div>
                            <div class="pagination pagination-centered">
                                <ul>
                                    <li><a href="#">&laquo;</a></li>
                                    <li><a href="#">10</a></li>
                                    <li class="active"><a href="#">11</a></li>
                                    <li><a href="#">12</a></li>
                                    <li><a href="#">&raquo;</a></li>
                                </ul>
                            </div>
                            <div class="pagination-desc">Pagination  Right:</div>
                            <div class="pagination pagination-right">
                                <ul>
                                    <li><a href="#">&laquo;</a></li>
                                    <li class="active"><a href="#">10</a></li>
                                    <li class="disabled"><a href="#">...</a></li>
                                    <li><a href="#">20</a></li>
                                    <li><a href="#">&raquo;</a></li>
                                </ul>
                            </div>
                            <div class="clear"></div>
                        </div>    
                    </div>
                    <!--Pagination END-->

                    <!--Pager Start-->
                    <div class="span6">

                        <div class="grid">
                            <div class="grid-title">
                                <div class="pull-left">Pager</div>
                                <div class="pull-right"></div>
                                <div class="clear"></div>
                            </div>
                            <div class="grid-content">
                                <ul class="pager">
                                    <li class="previous"><a href="#">← Older</a></li>
                                    <li class="next"><a href="#">Newer →</a></li>
                                </ul>
                                <div class="clear"></div>
                            </div>    
                        </div>

                        <div class="grid">
                            <div class="grid-title">
                                <div class="pull-left">Pager</div>
                                <div class="pull-right"></div>
                                <div class="clear"></div>
                            </div>
                            <div class="grid-content">
                                <ul class="pager">
                                    <li class="previous disabled"><a href="#">← Older</a></li>
                                    <li class="next disabled"><a href="#">Newer →</a></li>
                                </ul>
                                <div class="clear"></div>
                            </div>    
                        </div>


                    </div>
                    <!--Pager END-->
                </div>

                <div class="row-fluid">
                    <!--Popovers Start-->
                    <div class="grid span6">
                        <div class="grid-title">
                            <div class="pull-left">Popovers</div>
                            <div class="pull-right"></div>
                            <div class="clear"></div>
                        </div>
                        <div class="grid-content">
                            <div class="row-fluid show-grid">
                                <div class="span4"></div>
                                <div class="span4"><a class="popover-top"  title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Top</a></div>
                                <div class="span4"></div>
                            </div>
                            <div class="row-fluid show-grid">
                                <div class="span4"><a class="popover-left"  title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Left</a></div>
                                <div class="span4"></div>
                                <div class="span4"><a class="popover-right"  title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Right</a></div>
                            </div>
                            <div class="row-fluid show-grid">
                                <div class="span4"></div>
                                <div class="span4"><a class="popover-bottom"  title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Bottom</a></div>
                                <div class="span4"></div>
                            </div>

                            <div class="clear"></div>
                        </div>    
                    </div>
                    <!--Popovers END-->

                    <!--Tooltips Start-->
                    <div class="grid span6">
                        <div class="grid-title">
                            <div class="pull-left">Tooltips</div>
                            <div class="pull-right"></div>
                            <div class="clear"></div>
                        </div>
                        <div class="grid-content">
                            <div class="row-fluid show-grid">
                                <div class="span4"></div>
                                <div class="span4 tooltip-top"><a href="#" data-t="tooltip" title="Text">Top</a></div>
                                <div class="span4"></div>
                            </div>
                            <div class="row-fluid show-grid">
                                <div class="span4 tooltip-left"><a href="#" data-t="tooltip" title="Text">Left</a></div>
                                <div class="span4"></div>
                                <div class="span4 tooltip-right"><a href="#" data-t="tooltip" title="Text">Right</a></div>
                            </div>
                            <div class="row-fluid show-grid">
                                <div class="span4"></div>
                                <div class="span4 tooltip-bottom"><a href="#" data-t="tooltip" title="Text">Bottom</a></div>
                                <div class="span4"></div>
                            </div>

                            <div class="clear"></div>
                        </div>    
                    </div>

                    <!--Tooltips END-->
                </div>


                <!--Progress Bars Start-->
                <div class="grid">
                    <div class="grid-title">
                        <div class="pull-left">Progress Bars</div>
                        <div class="pull-right"></div>
                        <div class="clear"></div>
                    </div>
                    <div class="grid-content">
                        <div class="formRow">
                            <label>Progress Default:</label>
                            <div class="formRight">
                                <div class="progress progress-striped">
                                    <div class="bar" style="width: 20%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Progress Info:</label>
                            <div class="formRight">
                                <div class="progress progress-info progress-striped " >
                                    <div class="bar" style="width: 20%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Progress Success:</label>
                            <div class="formRight">
                                <div class="progress progress-success progress-striped">
                                    <div class="bar" style="width: 40%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Progress Warning:</label>
                            <div class="formRight">
                                <div class="progress progress-warning progress-striped">
                                    <div class="bar" style="width: 60%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="formRow">
                            <label>Progress Danger:</label>
                            <div class="formRight">
                                <div class="progress progress-danger progress-striped">
                                    <div class="bar" style="width: 80%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>    
                </div>
                <!--Progress Bars END-->

                <div class="row-fluid">
                    <!--Progress Bars Start-->
                    <div class="grid span6">
                        <div class="grid-title">
                            <div class="pull-left">Progress Bars</div>
                            <div class="pull-right"></div>
                            <div class="clear"></div>
                        </div>
                        <div class="grid-content">
                            <div class="formRow">
                                <label>Usual:</label>
                                <div class="formRight">
                                    <div class="p-headway"><div class="p-advance" style="width:40%;"></div></div>
                                </div>
                            </div>
                            <div class="formRow">
                                <label>With Label:</label>
                                <div class="formRight">
                                    <div class="p-headway"><div class="p-advance" style="width:40%;"></div><span>40%</span></div>
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Default:</label>
                                <div class="formRight">
                                    <div class="progress progress-warning progress-striped">
                                        <div class="bar" style="width: 60%"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Active:</label>
                                <div class="formRight">
                                    <div class="progress progress-warning active progress-striped">
                                        <div class="bar" style="width: 60%"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>    
                    </div>
                    <!--Progress Bars END-->

                    <!--Progress Bars Start-->
                    <div class="grid span6">
                        <div class="grid-title">
                            <div class="pull-left">Progress Bars</div>
                            <div class="pull-right"></div>
                            <div class="clear"></div>
                        </div>
                        <div class="grid-content">
                            <div class="formRow">
                                <label>Large:</label>
                                <div class="formRight">
                                    <div class="p-headway p-headway-large"><div class="p-advance" style="width:40%;"></div></div>
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Default:</label>
                                <div class="formRight">
                                    <div class="p-headway"><div class="p-advance" style="width:40%;"></div></div>
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Small:</label>
                                <div class="formRight">
                                    <div class="p-headway p-headway-small"><div class="p-advance" style="width:40%;"></div></div>
                                </div>
                            </div>
                            <div class="formRow">
                                <label>Mini:</label>
                                <div class="formRight">
                                    <div class="p-headway-min"><div class="p-advance-min" style="width:40%;"></div></div>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>    
                    </div>
                    <!--Progress Bars END-->
                </div>



            </div>
            <!--CONTENT MAIN END-->

        </div>
        <!--Content END-->

        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>

        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap-datepicker.js"></script>
        <script src="js/bootstrap-colorpicker.js"></script>
        <script src="js/google-code-prettify/prettify.js"></script>

        <script src="js/jquery.flot.min.js"></script>
        <script src="js/jquery.flot.pie.js"></script>
        <script src="js/jquery.flot.orderBars.js"></script>
        <script src="js/jquery.flot.resize.js"></script>
        <script src="js/graphtable.js"></script>
        <script src="js/fullcalendar.min.js"></script>
        <script src="js/chosen.jquery.min.js"></script>
        <script src="js/autoresize.jquery.min.js"></script>
        <script src="js/jquery.tagsinput.min.js"></script>
        <script src="js/jquery.autotab.js"></script>
        <script src="js/elfinder/js/elfinder.min.js" charset="utf-8"></script>
        <script src="js/tiny_mce/tiny_mce.js"></script>
        <script src="js/validation/languages/jquery.validationEngine-en.js" charset="utf-8"></script>
        <script src="js/validation/jquery.validationEngine.js" charset="utf-8"></script>
        <script src="js/jquery.jgrowl_minimized.js"></script>
        <script src="js/jquery.dataTables.min.js"></script>
        <script src="js/export/ZeroClipboard/ZeroClipboard.js"></script>
        <script src="js/export/js/TableTools.js"></script>
        <script src="js/jquery.mousewheel.js"></script>
        <script src="js/jquery.jscrollpane.min.js"></script>
        <script src="js/jquery.stepy.min.js"></script>
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/raphael.2.1.0.min.js"></script>
        <script src="js/justgage.1.0.1.min.js"></script>
        <script src="js/glisse.js"></script>
        <script src="js/styleswitcher.js"></script>

        <script src="js/application.js"></script>


    </body>
</html>
